<template>
  <el-container >
    <el-header class="w-100 p-0" >
      <div class="medalsilverhead text-center"  v-if="medallevel==1" style="display:inline-block;">
        <!--      v-if="medaldata.medallevel==2"-->
        <img style="height: 90px;vertical-align:middle"  src="http://wzsnginxservice001.vaiwan.com/wzs/medalBnak/金勋章.png" class="m-r-10 inline "/>
        <h2 class="p-0 m-0 inline"  style="vertical-align:middle" >
          金勋章
          <span style="font-size: 18px; font-weight: normal;" >共 {{medalnum}} 个
      </span></h2>
      </div>
      <div class="medalsilverhead text-center"  v-if="medallevel==2" style="display:inline-block;">
        <!--      v-if="medaldata.medallevel==2"-->
        <img style="height: 90px;vertical-align:middle"  src="http://wzsnginxservice001.vaiwan.com/wzs/medalBnak/银勋章.png" class="m-r-10 inline "/>
        <h2 class="p-0 m-0 inline"  style="vertical-align:middle" >
          银勋章
          <span style="font-size: 18px; font-weight: normal;" >共 {{medalnum}} 个
      </span></h2>
      </div>
      <div class="medalsilverhead text-center"  v-if="medallevel==3" style="display:inline-block;">
        <!--      v-if="medaldata.medallevel==2"-->
        <img style="height: 90px;vertical-align:middle" src="http://wzsnginxservice001.vaiwan.com/wzs/medalBnak/铜勋章.png" class="m-r-10 inline "/>
        <h2 class="p-0 m-0 inline"  style="vertical-align:middle" >
          铜勋章
          <span style="font-size: 18px; font-weight: normal;" >共 {{medalnum}} 个
      </span></h2>
      </div>
    </el-header>
    <el-main style="width: 95%;margin: 20px auto;">
      <div v-for="(routemedal) in medalInfo" v-if="routemedal.medalNums>=0">
        <el-divider >{{routemedal.routeName}}：共获得 {{routemedal.medalNums}} 个</el-divider>
        <el-table
          :data="routemedal.courseInfo">
          <el-table-column label="课程名称" align="center" prop="courseName"></el-table-column>
          <el-table-column label="获得时间" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.endTime.slice(0,10)}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div></div>
      </div>
      <div class="block f-r">
        <!--        <span class="demonstration">显示总数</span>-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, prev, pager, next"
          :current-page.sync="currentPage"
          :total="totalPage"
        >
        </el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import{
    getRouteInfoByMedalLevel
  }from "./personalInfo.js"
    export default {
        name: "medalInfo",
      data(){
          return{
            currentPage:0,
            medallevel:this.$route.query.medallevel,//页面跳转带来信息，包涵勋章等级和勋章总数
            medalnum:this.$route.query.medalnum,//页面跳转带来信息，包涵勋章等级和勋章总数
            medalInfo:[],//请求获得的路径获得勋章的情况
            totalPage:"",
          }
      },
      created() {
          var data={
            "mealLevel":this.medallevel,
            "page":1,
            "row":2
          }
          this.getmedalInfo(data);
      },
      methods:{
        handleSizeChange(){},
        handleCurrentChange(val){
          this.currentPage = val;
          //拉取数据
          var data = {
            "mealLevel":this.medallevel,
            "page":this.currentPage,
            "row":2
          };
          this.getmedalInfo(data);
        },
          getmedalInfo(data){
            const _this = this;
            getRouteInfoByMedalLevel(data).then((response) =>{
              console.log(response.data)
              _this.medalInfo = response.data.data;
              _this.totalPage = response.data.totalNum;
            })
          }
      },
    }
</script>

<style scoped>
  @import "../../styles/common.css";
  .medalgoldhead{
    height: 100px;
    box-shadow: 0px 5px 6px #8c939d;
    /*background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));*/
    background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(223,190,106,1));
    color:#2d2f33;
    width: 100%;
    display: block;
  }
  .medalsilverhead{
    height: 100px;
    box-shadow: 0px 5px 6px #8c939d;
    background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));
    color:#2d2f33;
    width: 100%;
    display: block;
  }
  .medalcopperhead{
    height: 100px;
    box-shadow: 0px 5px 6px #8c939d;
    background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(191,173,111,1));
    color:#2d2f33;
    width: 100%;
    display: block;
  }
  .text-center>h2{
    height: 100px;
    line-height: 100px;
  }
  .medalimg{
    position: absolute;
    top:10px;
    left: 20px;
  }
</style>
